<template>
  <div class="path-report-config">
    <a-form-model labelAlign="right" layout="horizontal" :labelCol="{span: 3, offset: 0}">
      <a-form-model-item label="参与分析的事件">
        <a-row type="flex" align="middle">
          <a-col :xs="12" :sm="12" :md="12" :lg="12">
            <a-select v-model="config.events" mode="multiple">
              <a-select-option v-for="item in events" :value="item.name" :key="item.name">
                {{
                item.displayName }}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>
      </a-form-model-item>

      <a-form-model-item label="起始/结束事件">
        <EndpointEvent
          v-bind:properties="properties"
          v-bind:events="events"
          v-bind:config="config"
          v-bind:datasourceId="form.datasourceId"
        ></EndpointEvent>
      </a-form-model-item>

      <a-form-model-item label="细分维度">
        <SubDimensionGroup
          v-bind:properties="properties"
          v-bind:events="events"
          v-bind:config="config"
        ></SubDimensionGroup>
      </a-form-model-item>
      <a-form-model-item label="用户过滤">
        <a-button @click="addRule">添加筛选</a-button>
        <MultiLevelFilter ref="filter" v-model="config.filter" v-bind:properties="userPropertiesAndGroups" v-bind:datasourceId="form.datasourceId" v-on:remove="demote"></MultiLevelFilter>
      </a-form-model-item>
      <a-form-model-item label="时间">
        <a-range-picker @change="onChange" v-model="defaultTime" :placeholder="['开始时间', '结束时间']" />
      </a-form-model-item>
      <a-form-model-item label="显示">
        最多显示
        <a-input-number :min="1" :max="10" v-model="form.config.limit.level" style="width: 10%; margin:0 5px;"></a-input-number>
        级，每级最多显示
        <a-input-number :min="1" :max="10" v-model="form.config.limit.node" style="width: 10%; margin:0 5px;"></a-input-number>
        个节点
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import EndpointEvent from "./components/EndpointEvent.vue";
import SubDimensionGroup from "./components/SubDimensionGroup.vue";
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue"; // 引入新版级联筛选组件
export default {
  name: "PathReportConfig",
  components: {
    MultiLevelFilter,
    EndpointEvent,
    SubDimensionGroup
  },
  props: {
    config: Object,
    properties: Array,
    events: Array,
    time: Object,
    form: Object
  },
  watch: {
   
  },
  data: function() {
    return {
      tree_show: false,
      config_num: 0,
      defaultTime: null
    };
  },
  computed: {
      userPropertiesAndGroups: function () {
          return this.properties.filter((item) => {
              return item.name.indexOf("users.") === 0 || item.name.indexOf("virtual.users.") === 0;
          });
      },
  },
  mounted () {
    if (this.form.config.time.start || this.form.config.time.end) {
      this.defaultTime = [this.moment(this.form.config.time.start).format('YYYY-MM-DD'), this.moment(this.form.config.time.end).format('YYYY-MM-DD')]
    } else {
      this.defaultTime = null
    }
  },
  methods: {
      //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
      demote: function (index) {
          let originalFilter = this.config.filter;
          let filterIndex = originalFilter.filters.findIndex((item) => {
              return item.index === index;
          });
          if (filterIndex !== -1) {
              let filter = originalFilter.filters[filterIndex];
              originalFilter.filters.splice(filterIndex, 1);
              originalFilter.condition = filter.condition;
              filter.rules.forEach((item, index) => {
                  originalFilter.rules.push(item);
              });
              filter.filters.forEach((item, index) => {
                  originalFilter.filters.push(item);
              });
          }
      },
      onChange (e, date) {
        this.form.config.time.start = date[0]
        this.form.config.time.end = date[1]
      },
      addRule() {
          this.$refs.filter.addRule();
      },
      addItem() {
          this.config.filter = {
              key: Math.random()
                  .toString(36)
                  .substr(2),
              Hierarchy: 0, // 逻辑层级
              property: "", // 事件属性名称
              operator: "", // 操作符
              value: "", // 事件属性值
              values: [] // 事件属性值数组
          };
          this.tree_show = true;
      },
      change_all(b, obj) {
          if (b) {
              this.config.filter = null;
              this.tree_show = false;
          } else {
              this.config.filter = obj;
          }
      },
  }
};
</script>

<style scoped>
.ant-row.ant-form-item {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.path-report-config >>> .ant-form-item-control-wrapper {
  flex: 1;
}
</style>